
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="つべ連続シャッフル再生,youtube shuffle,youtube再生リストを連続再生,シャッフル再生,youtube playlist">
<meta name="description" content="gridtubeはyoutube apiを利用した再生リスト共有サービスです。youtubeの再生リストを連続でシャッフル再生します,Grid view and Shuffle play your youtube playlist.">
<meta name="author" content="ken kodama">
<meta name="msvalidate.01" content="B17F46571AEB8DF77AAD776AA1A4EE23" />
<title>gridtube | Player for YouTube Playlist</title>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>

<link rel="stylesheet" href="/css/style.css"  />
<link rel="stylesheet" href="/css/blocks_it_style.css" >
 <script src="/js/blocksit.min.js"></script>
<script>
$(document).ready(function() {
    //alert("document .ready");
    $('#container').BlocksIt({
        numOfCol: 4,
        offsetX: 1,
        offsetY: 1,
        blockElement: '.grid'
    });
});
</script>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load("swfobject", "2.1");
</script>
<script src="/js/video_app.js" type="text/javascript"></script>
<script type="text/javascript">
var iOS = (navigator.userAgent.match(/(iPad|iPhone|iPod)/i) ? true : false);
var global_video_id = "6pnSpRGqvro";
var isShuffle = false;
var player = null;
var isAuthenticated ="true";
function layoutGrid() {
    $(document).ready(function() {
        $('#grid_area').BlocksIt({
            numOfCol: 4,
            offsetX: 1,
            offsetY: 1,
            blockElement: '.grid'
        });
    });
    return true;
}
function initloadPlayer() {
    fGetScript();
}
function fGetScript() {
    $.ajax({
        url: "http://www.youtube.com/player_api/",
        dataType: "script",
        success: function(data) {
            if (isShuffle) {
                loadPlayer(global_video_id);
            }
        },
        error: function(xhr, status, thrown) {
            fGetScript();
        }
    });
}
function loadVideoByVideoId(videoID) {
    player.loadVideoById(videoID);
    document.getElementById("videoInfo").innerHTML = "";
    ytVideoApp.showDownLoadLink(videoID);
    document.getElementById("videoInfo").innerHTML +="<p>videoID:" + videoID + "</p>";
}
function loadPlayer(videoID) {
    player = new YT.Player(
    'player', {
        width: '360', 
        height: '260', 
        videoId: videoID, 
        events: {
            "onStateChange": onPlayerStateChange 
        },
        playerVars: {
            "rel": 1, // 関連動画の有無(default:1)
            "showinfo": 0, // 動画情報表示(default:1)
            "controls": 1, // コントロール有無(default:1)
            "autoplay": 1,
            "enablejsapi": 1,
            "allowScriptAccess": "always"
        }
    }
);
    $("#player_area").html(player.getIframe());
}
function onPlayerStateChange(event) {
    if (event.data == 0) {
        shuffle();
    }
}
function dbg(str) {
    $("#debuglog").val(str + "\n" + $("#debuglog").val());
    if (window.console && window.console.log) {
        console.log(str);
    }
}
function shuffle() {
    isShuffle = true;
    var video_ids_csv = document.f2.csv_video_ids.value;
    var video_ids = video_ids_csv.split(',');
    var index = Math.floor(Math.random() * (video_ids.length));
    global_video_id = video_ids[index];
    loadVideoByVideoId(video_ids[index]);
    document.getElementById("player").loadVideoById(global_video_id);
}
function _run() {
    initloadPlayer();
}
function loadBodyAction(){
    if(isAuthenticated){
        ytVideoApp.retrievePlaylists();
    }
    return;
}
window.onYouTubeIframeAPIReady = function() {
    loadPlayer(global_video_id);
}
google.setOnLoadCallback(_run);
</script>
<!--twitter-->
<script>!function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (!d.getElementById(id)) {
        js = d.createElement(s);
        js.id = id;
        js.src = "//platform.twitter.com/widgets.js";
        fjs.parentNode.insertBefore(js, fjs);
    }
}(document, "script", "twitter-wjs");</script>
<!--fb-->
<script src="//connect.facebook.net/ja_JP/all.js#appId=156642911121470&amp;xfbml=1" type="text/javascript"></script>
</head>

<body onload="loadBodyAction();">
<div  id="main_box" data-role="page"  >

<div id="main_content" data-role="content" >
<div id="grid_area" >
 <div class='grid'> <div class='imgholder'>  <div class='gridimg' >  <a href='#player'  onclick="loadVideoByVideoId('6pnSpRGqvro')" ><img src='https://i1.ytimg.com/vi/6pnSpRGqvro/mqdefault.jpg' alt="The rest jump in" /></a>   <div class='title'>The rest jump in </div>   <div class='description'>people jump in at black rocks </div>  </div><!--gridimg--></div><!--imgholder--></div><!--grid--> <div ><form name='f2'><input type='hidden' name='csv_video_ids' value='6pnSpRGqvro'/></form></div><div class='grid'><div class='imgholder'><div class='gridimg'><div id='totalResults'>total:1</div></div></div></div></div></div><!--grid_area-->

<div id="top_nav" data-role="footer"  data-position="fixed" >

<div id="palyer_wrapper" data-role="collapsible" data-collapsed="false"　data-theme="b" data-content-theme="b">
<h3>player</h3>
<table class="player_table" align="center">
<tr><td><div id="player_area" ><div id="videoDiv" ></div><div id='player' ></div></div></td><td align="left"><div id="videoInfo"></div></td><tr></table>
</div>
    
<div id="navigation_wrapper">
<ul >
<li class="navigations">
<a href="#popupkeyword" data-rel="popup" >
<img class="nav_button" src="/images/icon-search.png" alt="share" />
</a>
<div data-role="popup" id="popupkeyword" class="ui-content" data-theme="a" >
<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
<div id="keyword_area">
<form id="keyowordForm" action="javascript:void(0)"> 
<label for="basic">keyword:</label>
<input type="search"  data-mini="true" data-prevent-focus-zoom="true" name="keyword" id="keyword" value=""
       onkeydown="if(event.keyCode == 13){ytVideoApp.feeds_from_keyword(this.value,null);}" />
<input type="button" name="button" id="button" value="search"  onclick="ytVideoApp.feeds_from_keyword(document.getElementById('keyword').value,null)"/>
</form>
</div><!--keyword_area-->
</div><!--popup-->
</li>
<li class="navigations">
<a data-inline="true" href="#" class="topLinks" data-ajax="false"  onclick="ytVideoApp.retrievePlaylists();return false;">
    <img class="nav_button" src="/images/reload.png" /></a>
</li>
<li class="navigations">
<a  data-inline="true" data-ajax="false"   href="/Index/oauth?logout" class="topLinks" >
<img class="nav_button" src="/images/logout.png" />
</a>
</li>
<li class="navigations">
<a data-inline="true" href="#" class="topLinks" onclick="shuffle();return false;">
<img class="nav_button" src="/images/shuffle.png" />
</a>
</li><!--navigations-->

<li class="navigations">
<a data-inline="true" rel="external"  data-icon="info" href="/help.php" class="topLinks">
<img class="nav_button" src="/images/help.png" />
</a>
</li>



<li class="navigations">
    <a href="#popupPlaylist" data-rel="popup" >
    <img class="nav_button" src="/images/icon_playlist.png" alt="share" />
    </a>
    <div data-role="popup" id="popupPlaylist" class="ui-content" data-theme="a" >
    <a href="#" id="playlist_close_button" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
    <!--pulldown-->
    <div id="searchResultsVideoList">
    <form id="navigationForm" action="javascript:void(0)"> </form>
    </div>
    </div><!--popup-->
</li>

<li class="navigations">
<a href="#popupInfo" data-rel="popup" ><img class="nav_button" src="/images/share.png" alt="share" /></a>
<div data-role="popup" id="popupInfo" class="ui-content" data-theme="d" style="height:150px;width:350px;">
<div id="social_area">
<form name="f1" id="f1">
<div id="share_feed_area">
<div id="share_url"><input type="text" size="10" maxlength="20" data-inline="true" value="http://goo.gl/8iUJbj" /></div>
<input type="hidden" name="feed_share_url" value="http://gridtube.hyperstylelab.com?feed_url=http%3A%2F%2Fwww.youtube.com%2Fplaylist%3Flist%3DPL_0KPQ_Gk7702jXf9e-GHGx9GZWu303_i" />
<div id="tweet"><a href="https://twitter.com/share" class="twitter-share-button" data-url="http://gridtube.hyperstylelab.com?feed_url=http%3A%2F%2Fwww.youtube.com%2Fplaylist%3Flist%3DPL_0KPQ_Gk7702jXf9e-GHGx9GZWu303_i" data-text="share youtube playlist!" data-count="none">Tweet</a>
</div>
<!--gplus index-->
<div id='gplus'>
<script type='text/javascript'>
(function() {
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
</script>
<g:plus action='share' href='http://gridtube.hyperstylelab.com?feed_url=http%3A%2F%2Fwww.youtube.com%2Fplaylist%3Flist%3DPL_0KPQ_Gk7702jXf9e-GHGx9GZWu303_i'></g:plus></div>
<div id="fb-root"></div>
<div class="fb-like"  data-href="http://http://gridtube.hyperstylelab.com/?feed_url=http://gridtube.hyperstylelab.com?feed_url=http%3A%2F%2Fwww.youtube.com%2Fplaylist%3Flist%3DPL_0KPQ_Gk7702jXf9e-GHGx9GZWu303_i" data-send="true" data-width="450" data-show-faces="true" data-font="arial" data-colorscheme="dark" data-action="recommend"></div>
</div></form>
</div><!--social_area-->
<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
</div><!--popup-->
</li><!--navigations-->
</ul></div><!--navigation_wrapper-->
</div><!--player_area-->
</div><!--container-->
</div>
<!--google analytics-->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-37241315-1']);
_gaq.push(['_trackPageview']);
(function() {
    var ga = document.createElement('script');
    ga.type = 'text/javascript';
    ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'stats.g.doubleclick.net/dc.js';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(ga, s);
})();
</script>
<script>
layoutGrid();
</script>
</body>
</html>